<template>
    <el-form ref="form" :model="form" label-width="80px" class="alertAdd"  v-if="show">
        <el-form-item label="姓名">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="职务">
            <el-input v-model="form.word"></el-input>
        </el-form-item>
        <el-form-item label="所在机构">
            <el-select v-model="form.institution" placeholder="请选择所在机构">
                <el-option :label="agency.name" :value="agency.value" v-for="agency in agency"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="服务地区">
            <el-select
            v-on:change="getProv($event)"
                       v-model="selectProv"
                       placeholder="请选择省份"
                      >
                <el-option
                        v-for="item in list"
                        :label="item.name"
                        :value="item.id" >
                </el-option>
            </el-select>
            <el-select
                       v-if="selectProv!=''"
                       v-model="selectCity"
                       placeholder="请选择城市"
                    >
                <el-option
                        v-for="item in citys"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="投资领域">
            <el-select v-model="form.field" placeholder="请选择投资领域">
                <el-option :label="field.name"  v-for="field in field" :value="field.value"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="投资轮次">
            <el-select v-model="form.fieldMaster" placeholder="请选择投资轮次">
                <el-option :label="period" v-for="period in period" :value="period"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="投资额度">
            <el-input v-model="form.money" class="small"></el-input>
            <span>万</span>
            <span>~</span>
            <el-input v-model="form.money2" class="small"></el-input>
            <span>万</span>

        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date" style="width: 100%;"></el-date-picker>
            </el-col>

        </el-form-item>

        <el-form-item label="细分领域">
            <el-checkbox-group v-model="form.type">
                <el-checkbox :label="fieldMaster.name" :value="fieldMaster.value" name="type" v-for="fieldMaster in fieldMaster"></el-checkbox>
                <!--<el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>-->
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="手机号">
            <el-input type="text" v-model="form.phoneNumber"></el-input>
        </el-form-item>
        <el-form-item label="微信号">
            <el-input type="text" v-model="form.wxNumber"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
            <el-input type="text" v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="是否激活">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button @click="cancel">取消</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
    import axios from 'axios'
    import "../../style/css/container.css"
    export default {
        props:["list"],
    data() {
        return {
            show: true,
            seen:true,
            citys: [],
            period:[],
            field:[],
            selectProv: '',
            selectCity: '',
            fieldMaster:'',
            agency:[],
            form: {
                name: '',
                word:'',
                region: '',
                field:'',
                institution:'',
                date: '',
                type: [],
                phoneNumber:'',
                wxNumber:'',
                email:'',
                delivery: false,

            }
        }
    },
    created(){
        axios.get('/api/rest/operator-investor-admin/period-master')
                .then(response => {
            const result = response.data
            if (result.code===100000) {
            this.period = result.items
            //console.log(this.period)
        }
    })
    .catch(error => {
        console.log(error)
    }),
        axios.get('/api/rest/operator-investor-admin/field-index')
                .then(response => {
            const result = response.data
            if (result.code===100000) {
            this.field = result.items
            //console.log(this.field)
        }
        })
        .catch(error => {
            console.log(error)
        }),
        axios.get('/api/rest/operator-investor-admin/field-master-bpa')
                .then(response => {
            const result = response.data
            if (result.code===100000) {
            this.fieldMaster = result.items
            //console.log(this.field)
        }
        })
        .catch(error => {
            console.log(error)
        }),
        axios.get('/api/rest/operator-investor-admin/investment-agency')
                .then(response => {
            const result = response.data
            if (result.code===100000) {
            this.agency = result.items
            console.log(this.agency)
        }
        })
        .catch(error => {
            console.log(error)
        })
    },
    methods: {
        cancel:function(){
            this.show=false;
            console.log()

        },
        onSubmit() {
            console.log("111");
        },
        getProv: function (prov) {

            let tempCity = [];
            this.citys = [];
            this.selectCity = '';
            axios.get('/api/rest/area/city?provinceId='+prov)
                    .then(response => {
                const result = response.data
                if (result.code===0) {
                this.citys = result.items
            }
                })
            .catch(error => {
                    console.log(error)
            })
        },
        getCity: function (city) {
            console.log(city);
            console.log(this.selectCity)
        }

    },
    create(){





    }
    }
</script>
<style>
    .el-checkbox+.el-checkbox{
        margin-left:0!important;
    }
    .el-checkbox{
        margin-right:30px!important;
    }
    .el-form-item__content{
        line-height:28px;
    }
    .el-form-item{
        margin: 0 auto 10px;
    }
    .small{
        width:25%;
        display: inline-block;
    }
    .small .el-input__inner{

        display: inline-block;
    }
</style>